<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--为了不让table表格样式覆盖-->
        <style>
            .layui-table-body {
                overflow: visible;
            }
            .layui-table-box {
                overflow: visible;
            }
            /* 设置下拉框的高度与表格单元相同 */
            td .layui-form-select{
                margin-top: -10px;
                margin-left: -15px;
                margin-right: -15px;
            }
        </style>
    </head>
    
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-input-inline layui-show-xs-block">
                                    <label>商品选择</label>
                                    <select name="goodsid" lay-search="">

                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <label>用户选择</label>
                                    <select name="userid" lay-search="">

                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn layui-btn-danger" onclick="delAll()">
                                <i class="layui-icon"></i>批量删除</button>
                            <button class="layui-btn" onclick="xadmin.open('添加订单','./usercar-add.html',650,500)">
                                <i class="layui-icon"></i>添加</button></div>
                        <div class="layui-card-body ">
                            <table id="orderlist" class="layui-table"  lay-filter="test"></table>
                        </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--模板  -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-danger" lay-event ="deleteAll">
                    <i class="layui-icon"></i>批量删除
                </button>
            </div>
        </script>
        <script type="text/html" id="model-goodsid">
            <select  name="goodsid" data-value="{{d.goodsid}}" lay-filter="cars-goodsid" infoid="{{d.id}}" lay-search="" >

            </select>
        </script>
        <script type="text/html" id="model-usersid">
            <select  name="userid" data-value="{{d.userid}}" lay-filter="cars-userid" infoid="{{d.id}}" lay-search="">

            </select>
        </script>
        <!--右侧工具-->
        <script type="text/html" id="model-info">
            <button onclick="xadmin.open('编辑','/lengmou/order/info?ordersid={{d.ordersid}}',1000,600)" type="button" class="layui-btn">
                <i class="iconfont">&#xe699;</i> 详情
            </button>
        </script>
        <!--订单状态下拉列表框-->

        <script>
            layui.use('table', function(){

                var table = layui.table;
                var goodsOptions = "",usersOptions="";
                //此处关闭异步加载：有时候还没有加载完毕表格就已经渲染完毕了，所以需要同步加载
                $.ajaxSettings.async = false;
                $.post(
                    "/lengmou/goods/jsonGoods",
                    function (data) {
                        var goods = data.goods;
                        for(var index in goods){
                            goodsOptions+='<option value = "' + goods[index].id + '">' + goods[index].name + '</option>\n';
                        }
                    },"json"
                );
                $.post(
                    "/lengmou/iuu/jsonUsers",
                    function (data) {
                        var users = data.users;
                        for(var index in users){
                            usersOptions+='<option value = "' + users[index].id + '">' + users[index].username + '</option>\n';
                        }
                    },"json"
                );
                $.ajaxSettings.async = true;
                //第一个实例
                table.render({
                    elem: '#orderlist'
                    ,toolbar: '#toolbarDemo'
                    ,url: '/lengmou/cars/getAll' //数据接口
                    ,method:'post'
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {field: 'id', type: 'checkbox',fixed: 'left',},
                        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'userid', title: '所属用户',templet:'#model-usersid'}
                        ,{field: 'goodsid', title: '商品',  templet:'#model-goodsid'}
                        ,{field: 'num', title: '商品数量',edit:'text'}
                    ]]
                    ,request:{pageName: 'pageNum',limitName: 'pageSize'}
                    ,done:function (res,curr,count) {
                        $("select[name='userid']").html(usersOptions);
                        $("select[name='goodsid']").html(goodsOptions);
                        layui.each($("select[name='userid']"), function (index, item) {
                            var elem = $(item);
                            console.log(elem.html());
                            elem.val(elem.data('value'));
                        });
                        layui.each($("select[name='goodsid']"), function (index, item) {
                            var elem = $(item);
                            console.log(elem.html());
                            elem.val(elem.data('value'));
                        });
                        $(".layui-form-select").parent().css('overflow','visible');
                        layui.form.render();
                    }
                });

                table.on('edit(test)', function(obj) {
                    var value = obj.value, //得到修改后的值
                        data = obj.data //得到所在行所有键值
                        ,
                        field = obj.field; //得到字段
                    layer.confirm('您确定修改数量吗？', {icon: 3, title:'提示'}, function(index){
                        $.post(
                            "/lengmou/cars/setCarNum",
                            {
                                id:data.id,
                                num:data.num
                            },function (data) {
                                if(data.state>0){
                                    layer.msg("修改成功");
                                }else if(data.state==-1){
                                    layer.msg("修改失败，该购物车不存在");
                                }else{
                                    ayer.msg("修改失败");
                                }
                            },"json"
                        );
                    });
            });

                table.on('toolbar(test)',
                    function (obj) {
                        var checkStatus = table.checkStatus(obj.config.id);
                        switch (obj.event) {
                            case 'deleteAll':
                                var data = checkStatus.data;

                                var test = JSON.stringify(data);
                                layer.confirm('您确定要删除您选中的这' + data.length + '个订购物车吗？', {icon: 3, title: '提示'}, function (index) {
                                    $.ajax(
                                        {
                                            type: 'POST',
                                            url: '/lengmou/cars/deleteAll',
                                            contentType: "application/json; charset=utf-8",
                                            data: test,
                                            dataType: 'json',
                                            success: function (data) {
                                                if (data.state > 0) {
                                                    layer.alert("操作成功", function () {
                                                        location.reload();
                                                    });
                                                } else if (data.state == -1) {
                                                    layer.alert("操作失败，参数错误");
                                                }
                                            }
                                        }
                                    );
                                    layer.close(index);

                                }, function (index) {
                                    layer.close(index);
                                });

                                break;
                        }
                    }
                );

            });
        </script>
    </body>

    <script>layui.use(['laydate', 'form'],
        function() {
            var laydate = layui.laydate;
            var form = layui.form;


            form.on('submit(sreach)', function(data){
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                        var table = layui.table;
                        table.reload('orderlist', {
                            url: '/lengmou/cars/getAll',
                            method:'post',
                            where: { //设定异步数据接口的额外参数，任意设
                                userid:data.field.userid,
                                goodsid:data.field.goodsid
                            }

                            ,page: true
                            ,id:'orderlist'
                        });
                //只重载数据
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            form.on('select(cars-goodsid)',function (data) {
                var id=data.elem.attributes['infoid'].nodeValue;
                var goodsid= data.elem.attributes['data-value'].nodeValue;
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                if(goodsid!=data.value){
                    layer.confirm("您确定要修改商品吗？", {icon: 3, title:'提示'}, function(index){
                        $.post(
                            "/lengmou/cars/setCarGoods",
                            {
                                id:id,
                                goodsid:data.value
                            },function (data) {
                                if(data.state>0){
                                    layer.msg("修改成功");
                                }else{
                                    layer.msg("修改失败")
                                }
                            },"json"
                        );
                    },function (index) {
                        location.reload();
                    });
                }
            });
            form.on('select(cars-userid)',function (data) {
                var id=data.elem.attributes['infoid'].nodeValue;
                var userid= data.elem.attributes['data-value'].nodeValue;
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                if(userid!=data.value){
                    layer.confirm("您确定要修改该订单的商品吗？", {icon: 3, title:'提示'}, function(index){
                        $.post(
                            "/lengmou/cars/setCarUsers",
                            {
                                id:id,
                                userid:data.value
                            },function (data) {
                                if(data.state>0){
                                    layer.msg("修改成功");
                                }else{
                                    layer.msg("修改失败")
                                }
                            },"json"
                        );
                    },function (index) {
                        location.reload();
                    });
                }
            });
        });



        /*用户-停用*/
        function member_stop(obj, id) {
            layer.confirm('确认要停用吗？',
            function(index) {

                if ($(obj).attr('title') == '启用') {

                    //发异步把用户状态进行更改
                    $(obj).attr('title', '停用');
                    $(obj).find('i').html('&#xe62f;');

                    $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                    layer.msg('已停用!', {
                        icon: 5,
                        time: 1000
                    });

                } else {
                    $(obj).attr('title', '启用');
                    $(obj).find('i').html('&#xe601;');

                    $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                    layer.msg('已启用!', {
                        icon: 5,
                        time: 1000
                    });
                }

            });
        }

        /*用户-删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？',
            function(index) {
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {
                    icon: 1,
                    time: 1000
                });
            });
        }

        function delAll(argument) {

            var data = tableCheck.getData();

            layer.confirm('确认要删除吗？' + data,
            function(index) {
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {
                    icon: 1
                });
                $(".layui-form-checked").not('.header').parents('tr').remove();
            });
        }</script>

</html>